<script src="../../../../jk-park-web-pc/src/router/index.js"></script>
<template>
    <div class="header-wrapper">
        <div class="logo-wrapper" :style="{'background-color': primaryColor}">
            百集管理后台
        </div>
        <div class="user-wrapper" :style="{'background-color': dynamicColorBylayout()}">
            <slot></slot>
            <div class="user" :style="{'color': dynamicFontColor()}">
                <img src="./img/thum.jpg" class="thum">
                &nbsp;
                <span>您好：{{userName}}</span>
                <span class="vertical">|</span>
                &nbsp;
                <span @click="quit" class="exit">退出登录</span>
            </div>
        </div>
    </div>
</template>

<script>
//   import ColorTheme from '@/components/colorTheme/index'
//   import ChangeFont from '@/components/changeFont/index'
//   import ChangeLayout from '@/components/changeLayout/index'
  import objectAssign from 'object-assign'
  export default {
    data() {
        return {
            userName: '',
            isHorizontal: true,
            isThemeDialog: false
        }
    },
    components: {
        // ColorTheme,
        // ChangeFont,
        // ChangeLayout
    },
    mounted(){
        this.userName = this.$cookies.get('userName');
    },
    methods:{
        quit:function(){
            this.$cookies.remove('token_back')
            sessionStorage.removeItem('permissions')
            sessionStorage.removeItem('aside')
            this.$router.options.isAddDynamicMenuRoutes=false
            this.$router.push({
                path: '/'
            })
        },
        openThemeDialog() {
            this.isThemeDialog = true
        },
        dynamicColorBylayout() {
            if(this.layoutName === 'horizontal') {
                return this.primaryColor
            } else if (this.layoutName === 'vertical') {
                return '#fff'
            }
        },
        dynamicFontColor() {
            if(this.layoutName === 'horizontal') {
                return '#fff'
            } else if (this.layoutName === 'vertical') {
                return '#606266'
            }
        }
    },
    created() {
    },
    mounted () {
    },
    computed: {
        primaryColor() {
            return this.$store.state.common.primaryColor;
        },
        deepPrimaryColor() {
            let color = this.$store.state.common.primaryColor;
            color = color.slice(0,5) + '88';
            return color
        },
        layoutName() {
                return this.$store.state.common.layoutName
        }
    }
}
</script>

<style scoped>
    .header-wrapper{
        display: flex;
        height: 70px;
    }
    .logo-wrapper{
        width: 270px;
        height: 70px;
        background: #1776c9;
        text-align: center;
        line-height: 70px;
        color: #fff;
        font-size: 18px;
        font-weight: bold;
    }
    .logo{
        display: block;
        width: 70%;
        margin: 15px auto;
    }
    .user-wrapper{
        flex: 1;
        background: #2285dc;
        display: flex;
        justify-content: flex-end;
    }
    .user{
        float: right;
        color: #fff;
        font-size: 14px;
        padding: 18px 20px;
        display: flex;
        align-items: center;
    }
    .user .thum{
        display: inline;
        border-radius: 5px;
        width: 34px;
        height: 34px;
        vertical-align: middle;
    }
    .user span{
        vertical-align: middle;
    }
    .user .vertical{
        margin: 0px 15px;
    }
    .exit{
        cursor: pointer;
    }
    .el-dropdown-link {
        cursor: pointer;
        color: white;
    }
    .el-icon-arrow-down {
        font-size: 12px;
    }
    .themeBox{
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
</style>
